﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Full entityspaces.js Example</title>
    <script src="../../Libs/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../../Libs/json2.js" type="text/javascript"></script>
    <script src="../../Libs/knockout-2.0.0.debug.js" type="text/javascript"></script>
    <script src="koGrid/koGrid.debug.js" type="text/javascript"></script>
    <script src="../../Release/entityspaces.XHR.debug.js" type="text/javascript"></script>
    <script src="Generated/Employees.js" type="text/javascript"></script>
    <script src="Custom/Employees.js" type="text/javascript"></script>	
    <script src="Generated/Orders.js" type="text/javascript"></script>
    <script src="Generated/OrderDetails.js" type="text/javascript"></script>
    <link href="koGrid/KoGrid.css" rel="stylesheet" type="text/css" />
</head>
<body>
 Filtering and Sorting on the "Sever Side" <a href="https://github.com/EntitySpaces/entityspaces.js" target="new">entityspaces.js</a> demonstration.<br />
 The WCF JSON Service and the entitityspaces.js JavaScript classes were generated from the Northwind database schema.<br />
 You can see the <b>Employee_Pager</b> method in our WCF Service method <a href="https://github.com/EntitySpaces/entityspaces.js/blob/master/Examples/EntitySpaces/esJson.Custom.cs" target=new">HERE ...</a><BR>
 You simply pass the <b>Employee_Pager</b> method the information contained in <a href="https://github.com/EntitySpaces/entityspaces.js/blob/master/Src/Paging.js" target="new">these classes</a>, simply view the source of this page to see how it's done.<BR><BR>
 There is a blog post explaining this example further <a href="http://www.entityspaces.net/blog/2012/03/14/entityspacesjs+And+More+Cool+EntitySpaces+Features.aspx" target="new">here ...</a><BR><BR>
    <table>
        <tr>
            <td valign="top" align="left" colspan="3">
				<div id="sandBox" class="example" style="height: 560px; max-width: 700px; border: 1px solid #666666;" 
					data-bind="koGrid: { data: employees,
						columnDefs: [ { field: 'EmployeeID', width: 140 },
								{ field: 'FirstName', displayName: 'First Name', width: 100 },
								{ field: 'LastName', displayName: 'Last Name', width: 100 },
								{ field: 'Title', width: 200 }],
						autogenerateColumns: false,
						isMultiSelect: false,
						enablePaging: true,
						useExternalFiltering: true,
						useExternalSorting: true,
						filterInfo: filterInfo,
						sortInfo: sortInfo,
						pageSize: pageSize,
						pageSizes: [25, 50, 75],
						currentPage: currentPage,
						totalServerItems: totalRows,
						selectedItem: selectedItem }">

				</div>
            </td>
        </tr>
    </table>
</body>

<script type="text/javascript">

    //es.dataProvider.baseURL = "http://localhost/esService/esJson.svc/";
    es.dataProvider.baseURL = "http://www.entityspaces.net/Knockout/Part1/esService/esJson.svc/";

	$(document).ready(function () {

		var myVM = function () {
			var self = this;

			this.employees = new es.objects.EmployeesCollection();
			this.currentPage = ko.observable(1);
			this.pageSize = ko.observable(25);
			this.totalRows = ko.observable(0);
			this.selectedItem = ko.observable();
			this.sortInfo = ko.observable();
			this.filterInfo = ko.observable();
			this.resetPageToOne = false;
			

			var getTotalRows = true;

			var filter = function (data, filterInfo) {

				var mgr = new kg.FilterManager({
					data: ko.observableArray(data)
				});

				mgr.filterInfo(filterInfo);

				return mgr.filteredData();
			};

			var sort = function (data, sortInfo) {

				var mgr = new kg.SortManager({
					data: ko.observableArray(data)
				});

				mgr.sortInfo(sortInfo);

				return mgr.sortedData();
			};

			this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {

				setTimeout(function () {

					var i, esFilter, filter, filterCriteria, esSortCriteria, pagerRequest;

					pagerRequest = new es.PagerRequest();
					pagerRequest.getTotalRows = getTotalRows;
					pagerRequest.pageSize = self.pageSize;
					pagerRequest.pageNumber = self.currentPage;

					if (filterInfo) {

						pagerRequest.filterCriteria = [];

						for (filter in filterInfo) {

							filterCriteria = filterInfo[filter];

							esFilter = new es.PagerFilterCriteria();
							esFilter.column = filter;
							esFilter.criteria1 = '%' + filterCriteria + '%';
							esFilter.operation = "LIKE";
							esFilter.conjuction = "AND";

							pagerRequest.filterCriteria.push(esFilter);
						}
					}

					if (sortInfo) {

						pagerRequest.sortCriteria = [];

						esSortCriteria = new es.PagerSortCriteria();
						esSortCriteria.column = sortInfo.column.field;
						esSortCriteria.direction = sortInfo.column.sortDirection();

						pagerRequest.sortCriteria.push(esSortCriteria);
					}

					self.employees.Employees_Pager(pagerRequest);

					if (getTotalRows === true) {
						self.totalRows(300); //pagerRequest.totalRows);
					}
					
					if(self.resetPageToOne === true) {
						self.resetPageToOne = false;
						self.currentPage(1);
					}

					getTotalRows = false;

				}, 0);
			};
			
			this.filterSortChanged = ko.computed(function () {
			
				// We access this two merely to be notified when one changes
				var junk = self.filterInfo();
				junk = self.sortInfo();
				
				self.resetPageToOne = true;
			});

			this.dataChangedTrigger = ko.computed(function () {
				var page = self.currentPage(),
				pageSize = self.pageSize(),
				filterInfo = self.filterInfo(),
				sortInfo = self.sortInfo();

				if (page && pageSize) {
					self.getPagedDataAsync(pageSize, page, filterInfo, sortInfo);
				}
				return null;
			});
		};

		window.viewModel = new myVM();

		ko.applyBindings(viewModel);

		viewModel.getPagedDataAsync(50, 1, viewModel.filterInfo(), viewModel.sortInfo());
	});
</script>


</html>